<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="提现"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="explain">
      <span>提现说明</span>
      <div>1.提现暂不收取手续费</div>
      <div>2.本平台未设置提现金额限制，但需遵循支付通道限制</div>
      <div>3.微信单笔最低1元，单笔最高5000元</div>
      <!-- <div>4.支付宝提现限额最高5万元</div> -->
    </div>
    <!-- <div class="number">
      <span>提现金额</span>
      <van-field
        v-model="number"
        left-icon="gold-coin"
        type="number"
        placeholder="请输入提现金额"
      />
      <div class="showN">
        当前可提现余额<span>{{ money }}</span
        >元
        <span>全部提现</span>
      </div>
    </div>
    <div class="way">
      <span>提现方式</span>
      <div class="part1">
        <div style="flex: 1">
          <div class="part3">
            <van-icon size="40px" name="wechat-pay" />
            <div>微信</div>
          </div>
          <div class="part3">
            <van-icon size="40px" name="alipay" />
            <div>支付宝</div>
          </div>
        </div>
        <van-radio-group v-model="radio">
          <van-radio
            icon-size="24px"
            checked-color="#D43B33"
            name="1"
          ></van-radio>
          <van-radio
            icon-size="24px"
            checked-color="#D43B33"
            name="2"
          ></van-radio>
        </van-radio-group>
      </div>
    </div> -->
    <div class="tipw">预计1-2个工作日处理，周末及节假日顺延</div>
    <div class="btn">
      <van-button type="info" @click="jump">确认提现</van-button>
    </div>
  </div>
</template>

<script>
import { getUserInfo, withDraw } from "../../apis/user.js";
import local from "../../utils/local";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      number: "",
      radio: 1,
    };
  },
  computed: {
    ...mapGetters(["withdrawAmount"]),
  },
  created() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    jump() {
      withDraw().then((res) => {
        console.log("withDraw", res);
        if (res.code === 200) {
          this.$router.push({ path: "wdsuccess" });
        } else {
          this.$toast("提现失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.explain {
  padding: 20px 15px;
  background-color: #f8f8f8;
  span {
    font-size: 17px;
  }
  div {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
  }
}
.number {
  padding: 20px 10px;
  span {
    font-size: 18px;
  }
  .van-field {
    margin-top: 10px;
    font-size: 18px;
    padding-left: 0px;
    border-bottom: 1px solid #ddd;
  }
  .showN {
    margin-top: 10px;
    color: #999;
    span {
      &:last-child {
        float: right;
        color: #d43b33;
      }
    }
  }
}
.way {
  margin: 0 10px;
  span {
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .part1 {
    display: flex;
    .part3 {
      display: flex;
      &:first-child {
        .van-icon {
          color: #00cc00 !important;
        }
      }
      &:last-child {
        .van-icon {
          color: #2c97fa;
        }
      }
      div {
        padding-top: 10px;
        margin-left: 10px;
      }
    }
    .van-radio-group {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}
.tipw {
  margin: 20px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}
.btn {
  margin: 0 10px;
  .van-button {
    width: 100%;
    background-image: linear-gradient(to bottom right, #92d7e6, #45b7cb);
    border: none;
    border-radius: 5px;
    font-size: 16px;
  }
}
</style>
